<!--
 * @Description: 公积金账户信息
 * @Author: 若城
 * @Date: 2023-03-28 20:50:25
 * @LastEditTime: 2023-03-30 01:09:04
-->
<template>
  <view>
    <u-cell-group>
      <u-cell>
        <text class="title" slot="title"> 个人基本信息</text>
      </u-cell>
    </u-cell-group>
    <u-list height="auto">
      <u-list-item
        v-for="(item, index) in peopleMsg"
        :key="index"
        class="myList"
      >
        <text class="clsLabel">{{ item.label }}</text>
        <text class="clsValue">{{ item.value }}</text>
        <text class="clsRemark">{{ item.remark }}</text>
      </u-list-item>
    </u-list>
    <u-gap height="22" bgColor="#f2f2f2"></u-gap>
    <u-cell-group>
      <u-cell>
        <text class="title" slot="title"> 个人账户信息</text>
      </u-cell>
    </u-cell-group>
    <u-list height="auto">
      <u-list-item
        v-for="(item, index) in accountMsg"
        :key="index"
        class="myList"
      >
        <text class="clsLabel">{{ item.label }}</text>
        <text class="clsValue">{{ item.value }}</text>
        <text class="clsRemark">{{ item.remark }}</text>
      </u-list-item>
    </u-list>

    <u-gap height="22" bgColor="#f2f2f2"></u-gap>
    <u-cell-group>
      <u-cell>
        <text class="title" slot="title"> 单位信息</text>
      </u-cell>
    </u-cell-group>
    <u-list height="auto">
      <u-list-item
        v-for="(item, index) in unitMsg"
        :key="index"
        class="myList"
      >
        <text class="clsLabel">{{ item.label }}</text>
        <text class="clsValue">{{ item.value }}</text>
        <text class="clsRemark">{{ item.remark }}</text>
      </u-list-item>
    </u-list>

    <view class="make">
        <view class="list">
            <view class="item" v-for="i in 500" :key="i">
                <text>{{username}}</text>
            </view>
        </view>
    </view>
  </view>
</template>
<script>
import { getGJZInfo } from "../../api/rc";
export default {
  onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
	
        this.username =option.username
	},
  data() {
    return {
      username:'',
      peopleMsg: {},
      accountMsg:{},
      unitMsg:{}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await getGJZInfo().then((res) => {
        this.peopleMsg = [
          {
            label: "个人账户",
            value: res.data.account,
            remark: "",
          },
          {
            label: "证件类型",
            value: res.data.card_type,
            remark: "",
          },
          {
            label: "证件号码",
            value: res.data.id_card,
            remark: "",
          },
          {
            label: "现户籍",
            value: res.data.hj,
            remark: "",
          },
          {
            label: "婚姻状况",
            value: res.data.hy,
            remark: "",
          },
          {
            label: "手机号码",
            value: res.data.phone,
            remark: "变更>",
          },
          {
            label: "签约银行",
            value: res.data.bank,
            remark: "",
          },
          {
            label: "银行卡号",
            value: res.data.bank_number,
            remark: "变更>",
          },
        ];
        this.accountMsg=[
             {
                 label:'账户类型',
                 value:res.data.account_type,
                 remark:''
             },
             {
                 label:'账户状态',
                 value:res.data.account_status,
                 remark:''
             } , {
                 label:'个人存缴基数',
                 value:res.data.gjj,
                 remark:''
             },  {
                 label:'个人存缴比例',
                 value:res.data.gjb,
                 remark:''
             },  {
                 label:'个人存缴金额',
                 value:res.data.gjm,
                 remark:''
             },  {
                 label:'单位存缴比例',
                 value:res.data.djb,
                 remark:''
             },  {
                 label:'单位存缴金额',
                 value:res.data.djm,
                 remark:''
             }
        ]
        this.unitMsg=[
             {
                 label:'单位名称',
                 value:res.data.company,
                 remark:''
             }, {
                 label:'单位账号',
                 value:res.data.company_account,
                 remark:''
             }
        ]
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 27rpx;
  color: #1051b2;
  border-left: 8rpx solid #1051b2;
  padding-left: 15rpx;
}
::v-deep .u-list-item {
  width: 750rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 78rpx;
  border-bottom: 1px solid #e6e6e6;
  align-items: center;
  .clsLabel {
    font-size: 21rpx;
    color: #939393;
    text-align: center;
    width: 30%;
  }
  .clsValue {
    font-size: 21rpx;
    color: #191919;
    text-align: center;
    width: 30%;

  }
  .clsRemark {
    color: #2f56a5;
    font-size: 25rpx;
    text-align: center;
    width: 30%;

  }
}


.make {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;

        .list {
            width: 500%;
            height: 400%;
            position: absolute;
            top: -50%;
            left: -50%;
            transform: rotate(-45deg);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            pointer-events: none;

            .item {
                font-size: 20px;
                color: rgba(220, 220, 220, 0.3);
                font-weight: bold;
                padding: 30rpx;
                pointer-events: none;
            }
        }
    }
</style>